<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my_web</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<style>
    #box {
        /* height: 780px; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 2px solid #efefef;
    }
    .box3 {
        /* float: right; */
        width: 100%;
        padding-top: 0%;
        display: flex;
        flex-wrap: wrap;
    }
    .goods {
        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 当前行的侧轴(纵轴)方向上的对齐方式 */
        /* justify-content: center; */
        /* 居中排列 */
        border: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        box-sizing: border-box;
        /* padding-left: 100px; */
    }

    a {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

<body>
    <!-- 马人和209001115 -->
    <div id="app"></div>
    <template id="root">
        <div id="box">
            <div class="box2">
                <h1>209001115马人和的作业</h1>
            </div>
            <div class="box3">
                <!-- 遍历循环数据 -->
                <div v-for="item in homeworkList" class="goods">
                    <a :href="item.url">
                        <img :src="item.img">
                        <span style="font-size: larger;">{{item.title}}</span>
                    </a>
                </div>
            </div>
        </div>
    </template>
    
</body>
<script>
    const app = Vue.createApp({
        template: '#root',
        data() {
            return {
                homeworkList: [
                    { id: '100081', img: 'images/作业.png', url: 'homework1.html', title: '导航栏的制作' },
                    { id: '100081', img: 'images/作业.png', url: 'homework2.html', title: '手机商城' },
                    { id: '100081', img: 'images/作业.png', url: '购物车/index.html', title: '小米商城购物车' },
                    { id: '100081', img: 'images/作业.png', url: '小米商城登录注册/login&regiest.html', title: '小米商城登录注册' },
                    { id: '100081', img: 'images/作业.png', url: 'Mitt实现组件通信.html', title: 'Mitt实现组件通信' },
                    { id: '100081', img: 'images/作业.png', url: '任务清单/taskList.html', title: '任务清单' },
                    { id: '100081', img: 'images/作业.png', url: '登录动画/登录动画.html', title: '登录动画' },
                    { id: '100081', img: 'images/作业.png', url: '#', title: '暂无作业' },
                ]
            }
        }
    })
    app.mount('#app')
</script>

</html>